import React from 'react'
import { Drawer, Image } from 'antd'
import type { orderType } from '@/types'
import { Descriptions } from 'antd'
import type { DescriptionsProps } from 'antd'
import './index.scss'

// @ts-ignore
const baseURL = import.meta.env.VITE_BASE_URL
const giftDrawer: React.FC<{ isOpen: boolean, order?: orderType, onClose: () => void }> = ({ isOpen, order, onClose }) => {
  const orderInfoitems = [
    {
      label: '订单号',
      span: 'filled',
      children: order?.orderNo
    },
    {
      label: '订单状态',
      children: order?.statusName
    },
    {
      label: '客户姓名',
      children: order?.customerName
    },
    {
      label: '客户手机',
      children: order?.customerPhone
    },
    {
      label: '客户地址',
      span: 'filled',
      children: order?.customerAddress
    },
    {
      label: '业务类型',
      children: order?.bizTypeName
    },
    {
      label: '套餐',
      children: order?.comboName
    },
    {
      label: '礼品',
      children: order?.giftName
    },
    {
      label: '办理日期',
      children: order?.appointmentProcessingDate
    },
    // {
    //   key: '9',
    //   label: '办理详情',
    //   children: order?.appointmentProcessingDate
    // }
    {
      label: '坐席团队',
      children: order?.seatTeamName
    },
    {
      label: '坐席姓名',
      children: order?.seatUsername
    },
    {
      label: '业务员团队',
      children: order?.bizTeamName
    },
    {
      label: '业务员姓名',
      children: order?.bizTeamUsername
    },
    {
      label: '创建时间',
      children: order?.createTime
    },
    {
      label: '办理主号',
      children: order?.processingMainNumber
    },
    {
      label: '冻结金额',
      children: order?.freezeAmount
    },
    {
      label: '销售机型',
      children: order?.salesModels
    },
    {
      label: '手机来源',
      children: order?.phoneSource
    },
    {
      label: '手机串码照片',
      children: order?.phoneSerialImg ? <Image
        style={{ width: '60px' }}
        src={baseURL + order?.phoneSerialImg}
      /> : '无'
    },
    {
      label: '订单编码照片',
      children: order?.orderCodeImg ? <Image
        style={{ width: '60px' }}
        src={baseURL + order?.orderCodeImg}
      /> : '无'
    },
    {
      label: '客户手持照',
      children: order?.customerHandheldImg ? <Image
        style={{ width: '60px' }}
        src={baseURL + order?.customerHandheldImg}
      /> : '无'
    },
    {
      label: '其他照片',
      span: 'filled',
      children: order?.customerHandheldImg ? <Image
        style={{ width: '60px' }}
        src={baseURL + order?.customerHandheldImg}
      /> : '无'
    },
    {
      label: '客户视频',
      children: order?.customerVideoUrl ?
        <video
          style={{ maxWidth: '200px', maxHeight: '200px' }}
          controls={true}
          src={baseURL + order?.customerVideoUrl} 
        /> : '无'
    }
  ].map((item, index) => {
    return {
      ...item,
      key: index + 1,
      children: item.children || '-',
      style: { lineHeight: '100px' }
    }
  }) as DescriptionsProps['items']

  return (<Drawer
    title="订单详情"
    width={800}
    onClose={onClose}
    open={isOpen}>
    <div className="drawer-container flex-column">
      <Descriptions title="" items={orderInfoitems} />
    </div>
  </Drawer>)
}

export default giftDrawer
